<nz-card nzTitle="用户信息" [nzBordered]="false">
  <form #myForm="ngForm" (ngSubmit)="submitForm()">

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="username">用户名</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input type="text" nz-input placeholder="请输入用户名" name="username" #username="ngModel" required maxlength="20"
               [(ngModel)]="model.username" id="username">
        <ng-container *ngIf="username.invalid && (username.dirty || username.touched)">
          <nz-form-explain *ngIf="username.errors.required">
            请输入用户名
          </nz-form-explain>
          <nz-form-explain *ngIf="username.errors.maxlength">
            用户名过长
          </nz-form-explain>
        </ng-container>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="email">邮箱</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input type="text" nz-input placeholder="请输入邮箱" name="email" #email="ngModel" required maxlength="50" id="email"
               [(ngModel)]="model.email" pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$">
        <ng-container *ngIf="email.invalid && (email.dirty || email.touched)">
          <nz-form-explain *ngIf="email.errors.required">
            请输入邮箱
          </nz-form-explain>
          <nz-form-explain *ngIf="email.errors.pattern">
            邮箱不正确
          </nz-form-explain>
          <nz-form-explain *ngIf="email.errors.maxlength">
            邮箱过长
          </nz-form-explain>
        </ng-container>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="sex">性别</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-select name="sex" id="sex" #sex="ngModel" [(ngModel)]="model.sex" required nzAllowClear
                   nzPlaceHolder="请选择性别">
          <nz-option nzValue="1" nzLabel="男"></nz-option>
          <nz-option nzValue="0" nzLabel="女"></nz-option>
          <nz-option nzValue="2" nzLabel="其它"></nz-option>
        </nz-select>
        <ng-container *ngIf="sex.invalid && (sex.dirty || sex.touched)">
          <nz-form-explain *ngIf="sex.errors.required">
            请输入性别
          </nz-form-explain>
        </ng-container>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="description">个人简介</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <textarea nz-input placeholder="请输入个人简介" [nzAutosize]="{ minRows: 2, maxRows: 6 }" id="description" name="description" #description="ngModel"
                  required [(ngModel)]="model.description"></textarea>
        <ng-container *ngIf="description.invalid && (description.dirty || description.touched)">
          <nz-form-explain *ngIf="description.errors.required">
            请输入个人简介
          </nz-form-explain>
        </ng-container>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="default" type="button" (click)="back()">返回</button>
        <button type="submit" nz-button nzType="primary" [disabled]="!myForm.form.valid">确定</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-card>
